現在開いているWebページのブログカードをワンクリックで取得できるようにしてみた

若槻龍太

2023.03.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

DevelopersIOの記事でWebページのリンクがブログカードで埋め込まれているのを見かけたことがあるのではないでしょうか。

この埋め込みは、はてなブログのブログカードの埋め込み機能を利用して実現しています。（そのため、はてなブログのカウンターがカード内に付いています）

ブログカード - はてなブログヘルプ

この機能は埋め込み用のHTMLコードのテンプレートを使用すれば簡単に利用できるのですが、頻繁に使いたい場合は埋め込みコードを作るのが少し手間ですね。

そこで今回は、現在開いているWebページのブログカードの埋め込み用コードをワンクリックで取得できるようにしてみました。

やってみる

Google ChromeのブックマークにJavaScriptコードを設定して、ブックマークを押下すると開いているWebページの埋め込み用コードを取得出来るようにしてみます。

スクリプト

ブログカード埋め込み用のHTMLコードの形式は次のようになります。

<iframe 
  class="hatenablogcard"
  style="width:100%;height:155px;max-width:680px"
  src="https://hatenablog-parts.com/embed?url=<埋め込みたいWebページのURL>"
  width="300"
  height="150"
  frameborder="0"
  scrolling="no"
></iframe>

現在開いているWebページの埋め込み用コードを取得してクリップボードに書き込む処理をするJavaScriptスクリプトを作成します。

javascript: (() => {
  const href = location.href;
  const textLink = `<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px" src="https://hatenablog-parts.com/embed?url=${href}" width="300" height="150" frameborder="0" scrolling="no"></iframe>`;
  navigator.clipboard.writeText(textLink);
})();

設定

Google Chromeのブックマークマネージャーで、上記スクリプトを[URL]に指定したブックマークを登録します。

使ってみる

埋め込み用コードを取得したいWebページを開き、先程登録したブックマークを開きます。

すると、クリップボードに次のようなコードが書き込まれます。このコードを埋め込みたい箇所にペーストします。

<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px" src="https://hatenablog-parts.com/embed?url=https://dev.classmethod.jp/" width="300" height="150" frameborder="0" scrolling="no"></iframe>

以下が上記で取得したコードを実際に埋め込んだものです。Webページのタイトル、デスクリプション、アイキャッチ画像が取得されブログカードで埋め込みできています！